<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>等宽瀑布流</title>
    <style>
        .container{
            width: 1100px;
            margin: 0 auto;
            position: relative;
        }
        .image-item{
            position: absolute;
            top: 0;
        }
        .image-item img{
            width: 100%;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="container"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
    // 获取图片列表显示区域的宽度
    const contentWidth = $('.container').width();
    // 设置图片显示的列数
    let column = 5;
    // 设置图片之间的边距
    const margin = 10;
    // 计算单个图片占据的宽度
    const imgWidth = (contentWidth - margin * (column - 1)) / column;
    // 保存图片数据
    let rows = [];
    // 翻页参数
    let page = 1;
    // 记录图片的信息
    let columnInfo = [];
    // 记录第一行十分都渲染完成
    let firstShow = false;
    // 获取ajax的数据
    function getImageData() {
        $.ajax({
            url: 'http://localhost:5000/search',
            type: 'get',
            data: {'page': page},
            success: function (ret) {
                rows = [].concat(ret.images);
                render();
            }
        })
    }

    function render() {
        rows.forEach((v, i) => {
            const imgHeight = imgWidth / v.width * v.height;
            // 渲染第一行图片
            if (i < column && !firstShow) {
                $('.container').append(`
                <div class="image-item" style="width: ${imgWidth}px;left: ${i*(imgWidth + margin)}px;">
                    <img src="${v.url}"/>
                </div>`);
                // 记录图片的显示高度
                // 当前图片的显示宽度/图片的实际宽度 * 图片的实际高度
                columnInfo.push({
                    height: imgHeight + margin,
                    columnIndex: i
                })
            } else { // 渲染其他列图片
                firstShow = true;
                // 找到高度最低的图片
                /*console.log(columnInfo.sort((a, b) => {
                    return a.height - b.height
                }))*/
                columnInfo.sort((a, b) => {
                    return a.height - b.height
                });
                const {height, columnIndex} = columnInfo[0];
                $('.container').append(`
                <div class="image-item" style="width: ${imgWidth}px;left: ${columnIndex*(imgWidth + margin)}px;top: ${height}px">
                    <img src="${v.url}"/>
                </div>`);
                columnInfo[0].height += imgHeight + margin;
            }
        })
    }
    getImageData();
    // 滚动加载
    $(window).scroll(function () {
        //showImages();
        // 页面高度document.documentElement.scrollHeight || document.body.scrollHeight;
        const pageHeight = $(document).height();
        // 可视区高度,document.documentElement.clientHeight || document.body.clientHeight;
        const viewHeight = $(window).height();
        // 滚动条距离顶部的高度 document.body.scrollTop|| document.documentElement.scrollTop
        const scrollTop = $(window).scrollTop();
        // 触底
        if (pageHeight - viewHeight - scrollTop <= 100) {
            page += 1;
            column = 0;
            getImageData();
        }
    });
</script>
</body>
</html>